<script setup lang='ts'>
import type { OptionsType, PlusColumn } from 'plus-pro-components'

import { useAddProduct, useGetProductCategoryOptions } from '@fl/api/purchase'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { treeFindLabel } from '@fl/utils/tree'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible', { required: true })

const router = useRouter()

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const dialogTitle = '新建组价'

const { isPending: isAddProductPending, mutate: addProduct } = useAddProduct()
const { data: productCategoryOptionsData, isLoading: isGetProductCategoryOptionsLoading } = useGetProductCategoryOptions()

// #region Form
const formRef = ref()
const isFormLoading = computed(() => isGetProductCategoryOptionsLoading.value)
const isSubmitLoading = computed(() => isAddProductPending.value)

const columns: PlusColumn[] = [
    {
        label: '组合商品类目',
        options: productCategoryOptionsData as OptionsType,
        prop: 'categoryId',
        valueType: 'select',
    },
    {
        fieldProps: {
            maxlength: 20,
            showWordLimit: true,
        },
        label: '组合商品名称',
        prop: 'productName',
        valueType: 'copy',
    },
    // {
    //     fieldProps: {
    //         type: 'datetime',
    //         valueFormat: 'YYYY-MM-DD HH:mm:ss',
    //     },
    //     label: '投标截止时间',
    //     prop: 'endTime',
    //     valueType: 'date-picker',
    // },
]

const rules = {
    categoryId: [
        {
            message: '请选择行业类型',
            required: true,
            trigger: 'change',
        },
    ],
    endTime: [
        {
            message: '请选择截止时间',
            required: true,
            trigger: 'change',
        },
    ],
    productName: [
        {
            message: '请输入组价名称',
            required: true,
            trigger: 'change',
        },
    ],
}

function submit() {
    const params = {
        ...state.value,
        categoryName: treeFindLabel({ targetValue: state.value.categoryId, treeData: productCategoryOptionsData.value }),
    }
    addProduct(params, {
        onSuccess(data) {
            ElMessage.success('操作成功')
            router.push({ path: '/purchase-pages/pricing-tool/add-or-edit-pricing', query: { id: data } })
            cancel()
        },
    })
}
// #endregion

// #region UI Listener
function onSaveBtnClick() {
    formRef.value.handleSubmit()
}

function cancel() {
    visible.value = false
}

function closed() {
    state.value = cloneDeep(initialState)
    formRef.value?.formInstance?.resetFields()
}
// #endregion
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialogTitle"
                close-on-press-escape
                @cancel="cancel"
                @closed="closed"
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <PlusForm v-else
                  ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
                  :row-props="{ gutter: 40 }"
                  label-position="top"
                  label-suffix=""
                  @submit="submit"
        />

        <template #footer>
            <div class="mx-auto">
                <SubmitBtn type="primary"
                           :loading="isSubmitLoading"
                           @click="onSaveBtnClick"
                >
                    保存
                </SubmitBtn>

                <el-button @click="cancel">
                    取消
                </el-button>
            </div>
        </template>
    </PlusDialog>
</template>
